<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <script src="/js/jquery/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script>
        //获取穿过来的评论id
        var id = getParams().id;
        var currentPage = 1;//当前页
        var totalPage;//总页数
        var travelArr = [];//存放页面的容器
        var loading = false;//判定请求数据是否传完的标记
        var pId; //上级评论id
        var greatStatus;//点赞状态
        var enshrineStatus;//收藏状态
        var signId; //标记对象的id
        function query() {
            if (loading) {//如果是加载状态就不发送请求
                return;
            }
            loading = true;//进入加载状态
            //查询该攻略下的所有评论
            //查询评论的所有评论
            $.get(baseUrl + "travels/" + id + "/comments", {currentPage: currentPage, pageSize: 8}, function (data) {
                //每次查询都要把页面信息合并到容器中
                $.merge(travelArr, data.list);
                var json = {list: travelArr};
                $("#travelCom").renderValues(json, {
                    getHref: getHref,
                    getCommentID: function (item, value) {
                        $(item).attr("data-id", value);
                    }
                });
                //控制评论长度
                $(".content").click(function () {
                    changeClass($(this), "aa", "")
                })
                //绑定评论弹窗
                $(".travelCommentBtn").click(function () {
                    pId = $(this).data("id");
                    $('#commentForm')[0].reset();
                    $('#commentModal').modal('show');
                });
                //每查询一次当前页数加1
                currentPage++;
                //获取数据的总页数
                totalPage = data.pages;
                loading = false;//加载完成后把状态改成可以发送请求的状态

                //绑定评论的点赞事件
                $("#great").click(function () {
                    changeClass($(this), "fa-thumbs-o-up", "fa-thumbs-up");
                })
            });

        }

        $(function () {


            //默认自动查询第一页数据
            query();
            $(window).scroll(function () {
                //如果页面的滚动长度加窗口长度等于页面的总长度时 发送请求查询下一页数据
                if ($(document).scrollTop() + $(window).height() >= $(document).height() - 50) {//提前五十像素发送请求
                    //当前页小于总页数的时候才查询
                    if (currentPage <= totalPage) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoIcon: '../img/icon/loading.gif',
                            infoText: '不要拉了,再拉就出屎了!',
                            autoClose: 2500
                        });
                    }

                }
            });


            //模态框关闭事件绑定
            $("#closeBtn").click(function () {
                $("#commentModal").modal("hide");
            });
            //模态框提交事件绑定
            $("#subBtn").click(function () {
                $("#commentModal").modal("hide");
                $.ajax({
                    url: baseUrl + "travelComments/",
                    method: "post",
                    data: {
                        parentId: pId,
                        'travel.id': id,
                        content: $("#content").val()

                    },
                    success: function (data) {
                        window.location.reload();
                    }

                })
            });



        })

    </script>
    <style>
        .aa {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
    </style>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>评论详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>


<div id="travelCom" class="container">
    <div render-loop="list"><!--快来发表你的评论吧-->
        <div class="row">
            <div class="col-2 comment-head">
                <a data-url="/userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="list.user.headImgUrl">
                </a>
            </div>
            <div class="col">
                <a style="font-size: 10px;color: #61CAD0" render-html="list.user.nickName"></a>
                <span class="comment-date" render-html="list.creatTime"></span>
                <span class="travelCommentBtn" render-key="list.id" render-fun="getCommentID">回复</span>
                <div class="comment-content">
                    <p render-html="list.content" class="aa content"></p>
                </div>
                <hr/>
                <div id="commentReplyBtn">
                    <div render-loop="list.comments">
                        <div class="row">
                            <div class="col-2 comment-head">
                                <a data-url="/userProfiles.html?id=" render-key="list.comments.user.id"
                                   render-fun="getHref">
                                    <img class="rounded-circle" render-src="list.comments.user.headImgUrl">
                                </a>
                            </div>
                            <div class="col">
                                <a style="font-size: 10px;color: #61CAD0"
                                   render-html="list.comments.user.nickName"></a>
                                <span class="comment-date" render-html="list.comments.creatTime"></span>
                                <div class="comment-content">
                                    <p render-html="list.comments.content" class="aa content"></p>
                                </div>
                                <hr/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="operation">
    <div class="d-flex justify-content-between">
        <div class="p-2"><i class="fa fa-commenting-o"></i>
            <a href="javascript:;" class="travelCommentBtn flipInX"> 请发表您的评论</a>
        </div>
    </div>
</div>

<!--评论弹框-->
<div class="modal fade" id="commentModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <form id="commentForm">
                    <div class="form-group">
                        <label for="content" class="col-form-label">请吹牛:</label>
                        <input type="text" autofocus class="form-control" id="content">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="closeBtn">关闭</button>
                <button type="button" class="btn btn-primary" id="subBtn">确定</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>